<template>
  <el-dialog title="添加自选"
             :visible="showDialog"
             width="40%"
             center>
    <span slot="footer"
          class="dialog-footer">
      <el-button type="primary"
                 @click="handleAdd">确定</el-button>
      <el-button @click="closeDialog">关闭</el-button>
    </span>

    <el-form :model="numberValidateForm"
             ref="numberValidateForm"
             label-width="180px"
             class="demo-ruleForm">
      <el-form-item label="股票代码/名称"
                    prop="stock_symbol"
                    :rules="[
      { required: true, message: '内容不能为空'},
    ]">
        <el-autocomplete class="inline-input"
                         v-model="numberValidateForm.stock_symbol"
                         :fetch-suggestions="querySearchAsync"
                         placeholder="请输入内容"
                         clearable
                         @select="handleSelect"></el-autocomplete>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary"
                   @click="submitForm('numberValidateForm')">提交</el-button>
        <el-button @click="resetForm('numberValidateForm')">重置</el-button>
      </el-form-item> -->
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  props: ['showDialog'],
  data () {
    return {
      numberValidateForm: {
        stock_symbol: ''
      },
      restaurants: [],
      timeout: null,
      stock_symbol: '',
    };
  },
  methods: {
    closeDialog () {
      // 通过自定义事件向父组件发送关闭对话框的信号
      this.$emit('close-dialog');
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    querySearchAsync (queryString, cb) {
      const params = {
        queryString: this.numberValidateForm.stock_symbol
      };
      this.$http.get('/stock/search', params).then(res => {
        if (res.data.code == 200) {
          let restaurants = res.data.data;
          for (let i = 0; i < restaurants.length; i++) {
            restaurants[i] = Object.assign(restaurants[i], { "value": restaurants[i].stockSymbol + "---" + restaurants[i].stockName });
          }
          this.restaurants = restaurants;
          clearTimeout(this.timeout);
          this.timeout = setTimeout(() => {
            cb(restaurants);
          }, 1000 * Math.random());
        }
      });

    },
    loadStockInfo () {
      const params = {
        queryString: this.numberValidateForm.stock_symbol
      };
      this.$http.get('/stock/search', params).then(res => {
        if (res.data.code == 200) {
          let restaurants = res.data.data;
          for (let i = 0; i < restaurants.length; i++) {
            restaurants[i] = Object.assign(restaurants[i], { "value": restaurants[i].stockSymbol + "---" + restaurants[i].stockName });
          }
          this.restaurants = restaurants;
          console.log(this.restaurants);
        }
      });
      return this.restaurants;

    },
    handleSelect (item) {
      this.stock_symbol = item.stockSymbol;
      console.log(item);
    },
    handleAdd () {
      this.$http.get('/stock/add/' + this.stock_symbol).then(res => {
        if (res.data.code == 200) {
          console.log(res.data);
          this.$message({
            message: res.data.msg,
            type: 'success'
          });
          this.closeDialog();
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error'
          });
        }
      });
    }
  },
  created () {
    this.restaurants = this.loadStockInfo();
  }
};
</script>

<style >
</style>